<!-- 房屋交付 -->
<template>
	<view class="tab-container bg-white margin-top">
		<view class="cu-list menu">
			<view class="cu-item arrow" v-if="rooms.length > 0" v-for="(item, key) in rooms" :key="key"
				:data-item="item" @click="myHouseDetail(item)">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-homefill text-green margin-right-xs"></text>
						{{item.floorNum}}号楼{{item.unitNum}}单元{{item.roomNum}}室
					</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-right margin-right-xs"></text> {{item.roomId}}
					</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-right margin-right-xs">房屋状态</text> {{item.state==0?"交付中":"已交付"}}
					</view>
				</view>
				<view class="action">
					<view class="action_title" v-if="item.state==0">
						交付中
					</view>
				</view>
			</view>

			<view class="cu-item" v-if="rooms.length === 0">
				<view class="content">
					<text class="cuIcon-warn text-green"></text>
					<text class="text-grey">暂无预约信息</text>
				</view>
				<view class="action">

				</view>
			</view>
		</view>
		<view class="bindHandle">
			<button @click="bindApplication" type="primary">预约申请</button>
		</view>
	</view>
</template>

<script>
	// pages/my/myHouse.js
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;

	export default {
		data() {
			return {
				rooms: ""
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(option) {
			// this.homeData()
			wx.request({
				url: "http://localhost:8888/myhouse",
				post: "get",
				success: (ok) => {
					console.log(ok)
					this.rooms = ok.data
					console.log("this.rooms", this.rooms, this.rooms.length)
				}
			})
			// context.onLoad(options);
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.loadOwnerHouse();
			uni.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			myHouseDetail: function(_item) {
				uni.navigateTo({
					url: './beganDelivery?room=' + JSON.stringify(_item)
				})
			},
			// 预约申请
			bindApplication: function() {
				uni.navigateTo({
					url: './applyDelivery'
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	@import "@/pagesB/my/myHouse.css";

	.margin-top {
		margin-top: 0rpx;
	}

	.cu-list {
		width: 100%;
		overflow: auto;
		background-color: white;
		height: calc(100vh - 120rpx);

		.cu-item {
			background-color: #F5F5F5;
			margin: 20rpx 20rpx;
			border-radius: 30rpx;
		}
	}

	.bindHandle {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		background-color: aliceblue;

		button:nth-child(1) {
			margin: 15rpx;
			width: 400rpx;
			height: 70rpx;
			border-radius: 40rpx;
			font-size: 26rpx;
			line-height: 70rpx;
		}

		button:nth-child(2) {
			margin: 20rpx;
			width: 180rpx;
			height: 60rpx;
			float: right;
			font-size: 26rpx;
			line-height: 60rpx;
		}
	}
</style>
